<template>
  <div>
    <el-container style="height: 696px; border: 1px solid #eee">
      <Left></Left>
      <el-container>
        <el-header style="text-align: right; font-size: 12px;width: 100%;">
          <Top></Top>
        </el-header>
        <el-main>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <b style="font-family: '微软雅黑';color: #606266;margin: 20px 30px;text-align: center;font-size: 20px;">课程作业提交情况</b>
              </div>
            </el-col>
          </el-row>
          <div
            style="margin: 50px auto;width: 90%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
            <el-form style="margin: 10px 30px;" :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm"
                     class="demo-form-inline">
              <el-form-item label="班级名称" prop="classroomName">
                <el-select v-model="ruleForm.classroomName" clearable placeholder="请选择班级">
                  <el-option
                    v-for="item in classroomNames"
                    :key="item.classroomName"
                    :label="item.classroomName"
                    :value="item.classroomName">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="课程名称" prop="courseName">
                <el-select v-model="ruleForm.courseName" clearable placeholder="请选择课程">
                  <el-option
                    v-for="item in courseNames"
                    :key="item.courseName"
                    :label="item.courseName"
                    :value="item.courseName">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="作业名称" prop="taskName">
                <el-select v-model="ruleForm.taskName" clearable placeholder="请选择作业">
                  <el-option
                    v-for="item in taskNames"
                    :key="item.taskName"
                    :label="item.taskName"
                    :value="item.taskName">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit('ruleForm')">查看图表</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div v-loading="loading"
               :element-loading-text="text"
               element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(0, 0, 0, 0.8)"
               style="margin: 20px auto;width: 90%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
            <div v-show="show" id="main"></div>
            <div v-show="histogram" id="histogram"></div>
          </div>
        </el-main>

      </el-container>

    </el-container>
  </div>
</template>

<script>
import Left from '@/components/teacherSide/left'
import Top from '@/components/teacherSide/top'
import * as echarts from 'echarts'

export default {
  name: 'teacherTaskSubmitAnalysis',
  data () {
    return {
      text: '',
      show: false,
      histogram: false,
      loading: true,
      classroomNames: [],
      taskNames: [],
      courseNames: [],
      teacherId: '',
      taskSubmit: {},
      ruleForm: {
        classroomName: '',
        courseName: '',
        taskName: ''
      },
      rules: {
        classroomName: [
          {required: true, message: '请选择班级', trigger: 'blur'}
        ],
        courseName: [
          {required: true, message: '请选择课程', trigger: 'blur'}
        ],
        taskName: [
          {required: true, message: '请选择作业', trigger: 'blur'}
        ]
      }
    }
  },
  created () {
    this.text = '请选择班级课程作业加载图表'
    this.teacherId = JSON.parse(localStorage.getItem('teacher')).teacherId
  },
  beforeMount () {
    this.getTeacher()
  },
  mounted () {
    this.getAllClassroomNames()
    this.getAllCourseNames()
    this.getAllTaskNames()
  },
  methods: {
    // 获取教师id
    getTeacher () {
      this.teacherId = JSON.parse(localStorage.getItem('teacher')).teacherId
      this.ruleForm.teacherName = JSON.parse(localStorage.getItem('teacher')).teacherName
    },
    // 获取当前老师名下的所有课程名称
    getAllCourseNames () {
      this.$axios.post('http://localhost:8888/getAllCourseNameByTeacherId/' + this.teacherId).then(res => {
        this.courseNames = res.data.data
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    // 获取当前老师名下的所有班级名称
    getAllClassroomNames () {
      this.$axios.post('http://localhost:8888/getAllClassroomByTeacherId/' + this.teacherId).then(res => {
        this.classroomNames = res.data.data
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    // 获取当前老师名下的所有班级名称
    getAllTaskNames () {
      this.$axios.post('http://localhost:8888/getAllTaskNameByTeacherId/' + this.teacherId).then(res => {
        this.taskNames = res.data.data
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    // 提交表单，获取后端数据
    onSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        // 上传表单信息
        if (valid) {
          this.$axios.post('http://localhost:8888/teacherGetSubmitCourseAssignmentData/' + this.teacherId, this.ruleForm).then(res => {
            if (res.data.flag && res.data.data != null) {
              this.$message({
                message: '恭喜你,' + this.ruleForm.classroomName + '下的' + this.ruleForm.courseName + '的' + this.ruleForm.taskName + '信息获取成功，开始绘图.....',
                type: 'success'
              })
              this.show = true
              this.loading = false
              this.taskSubmit = res.data.data
              this.taskSubmitECharts()
            } else {
              this.$message({
                message: '警告哦，获取信息失败',
                type: 'warning'
              })
              this.show = false
              this.loading = true
              this.text = this.ruleForm.classroomName + '下的' + this.ruleForm.courseName + '的' + this.ruleForm.taskName + '暂无学生提交作业，请重新选择'
            }
          }).catch(err => {
            return Promise.reject(err)
          })
        } else {
          return false
        }
      })
    },
    taskSubmitECharts () {
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      var option
      myChart.resize({
        width: 1115,
        height: 400
      })
      option = {
        title: {
          text: '课程作业提交情况',
          left: 'center',
          top: 'top'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['2', '3']
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            // prettier-ignore
            data: ['总人数', '已交人数', '未交人数']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '222',
            type: 'bar',
            data: [this.taskSubmit.total, this.taskSubmit.paid, this.taskSubmit.unpaid],
            markPoint: {
              data: [
                { type: 'max', name: 'Max22222' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg1' }]
            }
          }
        ]
      }
      option && myChart.setOption(option)
    }
  },
  components: {
    Left,
    Top
  }
}
</script>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>
<style scoped>
  .router-link-active {
    text-decoration: none;
    color: yellow;
  }

  a {
    text-decoration: none;
    color: white;
  }
</style>
<style>
  .el-row {
    margin-bottom: 20px;

  &
  :last-child {
    margin-bottom: 0;
  }

  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #cadcf5;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
